<template>
  <!-- 就诊人组件静态结构 -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>就诊人管理</span>
        <el-button class="button" type="primary" :icon="User" @click="addUser"
          >添加就诊人</el-button
        >
      </div>
    </template>
    <!-- 就诊人管理模块展示就诊人信息的结构 -->
    <div class="visitors" v-if="scene == 0">
      <Visitor
        @changeScene="changeScene"
        @removeUser="removeUser"
        class="item"
        v-for="(user, index) in userArr"
        :key="user.id"
        :user="user"
        :index="index"
      />
    </div>
    <!-- 添加就诊人 | 修改已有就诊人信息的结构 -->
    <div class="form" v-if="scene == 1">
      <el-divider content-position="left">就诊人信息</el-divider>
      <el-form style="width: 60%; margin: 10px auto">
        <el-form-item label="用户姓名">
          <el-input placeholder="请输入用户姓名" v-model="userParams.name"></el-input>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select
            placeholder="请选择证件类型"
            style="width: 100%"
            v-model="userParams.certificatesType"
          >
            <el-option
              v-for="item in certationArr"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input placeholder="请输入证件号码" v-model="userParams.certificatesNo"></el-input>
        </el-form-item>
        <el-form-item label="用户性别">
          <el-radio-group v-model="userParams.sex">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker
            v-model="userParams.birthdate"
            value-format="YYYY-MM-DD"
            type="date"
            placeholder="请选择日期"
          />
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="userParams.phone" placeholder="请输入手机号码"></el-input>
        </el-form-item>
      </el-form>
      <el-divider content-position="left">建档信息(完善后部分医院首次就诊不排队建档)</el-divider>
      <el-form style="width: 60%; margin: 10px auto">
        <el-form-item label="婚姻状况">
          <el-radio-group v-model="userParams.isMarry">
            <el-radio :label="1">已婚</el-radio>
            <el-radio :label="0">未婚</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="自费/医保">
          <el-radio-group v-model="userParams.isInsure">
            <el-radio :label="1">自费</el-radio>
            <el-radio :label="0">医保</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="当前住址">
          <el-cascader :props="props" v-model="userParams.addressSelected" />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input placeholder="请输入详细地址" v-model="userParams.address"></el-input>
        </el-form-item>
      </el-form>
      <el-divider content-position="left">联系人信息(选填)</el-divider>
      <el-form style="width: 60%; margin: 10px auto" label-width="80">
        <el-form-item label="用户姓名">
          <el-input v-model="userParams.contactsName" placeholder="请输入用户姓名"></el-input>
        </el-form-item>
        <el-form-item label="证件类型">
          <el-select
            placeholder="请选择证件类型"
            style="width: 100%"
            v-model="userParams.contactsCertificatesType"
          >
            <el-option
              v-for="item in certationArr"
              :key="item.id"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="证件号码">
          <el-input
            placeholder="请输入证件号码"
            v-model="userParams.contactsCertificatesNo"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input placeholder="请输入手机号码" v-model="userParams.contactsPhone"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="default" @click="submit">提交</el-button>
          <el-button type="primary" size="default" @click="reset">重写</el-button>
        </el-form-item>
      </el-form>
    </div>
  </el-card>
</template>

<script setup lang="ts">
import { ElMessage, type CascaderProps } from 'element-plus'
import { User } from '@element-plus/icons-vue'
import { reqGetUser } from '@/api/hospital'
import { reqCertationType, reqCity, reqAddOrUpdateUser } from '@/api/user'
import type { UserResponseData, UserArr } from '@/api/hospital/type'
import type {
  CertificatesTypeResponseData,
  CertificatesArr,
  AddOrUpdateUser
} from '@/api/user/type'
import { onMounted, ref, reactive, watch } from 'vue'
//引入路由器与路由方法
import { useRoute, useRouter } from 'vue-router'
let $route = useRoute()
let $router = useRouter()
//存储全部就诊人信息
let userArr = ref<UserArr>([])
//定义一个响应式数据，决定卡片的身体部分展示的内容
let scene = ref<number>(0)
//存储证件类型的数据
let certationArr = ref<CertificatesArr>([])
//收集新增就诊人的数据
let userParams: AddOrUpdateUser = reactive({
  name: '',
  certificatesType: '',
  certificatesNo: '',
  sex: 0,
  birthdate: '',
  phone: '',
  isMarry: 0,
  isInsure: 0,
  addressSelected: [],
  address: '',
  contactsName: '',
  contactsCertificatesType: '',
  contactsCertificatesNo: '',
  contactsPhone: ''
})
//组件挂载完毕去获取就诊人信息
onMounted(() => {
  //获取全部就诊人信息
  getAllUser()
  //获取证件类型
  getCertationType()
  //判断当前路由组件是不是从挂号组件而来[挂号组件而来，路径上是携带了一个 query 参数 type=add]
  if ($route.query.type == 'add') {
    scene.value = 1
  }

  if ($route.query.type == 'edit') {
    scene.value = 1
  }
})
//获取全部就诊人信息
const getAllUser = async () => {
  let result: UserResponseData = await reqGetUser()
  if (result.code == 200) {
    userArr.value = result.data
  }
}

//添加就诊人按钮的回调
const addUser = () => {
  //清空上一次的数据
  reset()

  //场景切换为 1
  scene.value = 1
}

//就诊人子组件自定义事件的回调
const changeScene = (user: AddOrUpdateUser) => {
  //场景切换为 1
  scene.value = 1
  //收集已有的就诊人信息
  Object.assign(userParams, user)
}

//清空上一次的数据
const reset = () => {
  Object.assign(userParams, {
    id: null,
    name: '',
    certificatesType: '',
    certificatesNo: '',
    sex: 0,
    birthdate: '',
    phone: '',
    isMarry: 0,
    isInsure: 0,
    addressSelected: [],
    address: '',
    contactsName: '',
    contactsCertificatesType: '',
    contactsCertificatesNo: '',
    contactsPhone: ''
  })
}

//获取证件类型的接口
const getCertationType = async () => {
  let result: CertificatesTypeResponseData = await reqCertationType()
  if (result.code == 200) {
    certationArr.value = result.data
  }
}

//级联选择器提供的数据
const props: CascaderProps = {
  lazy: true, //懒加载数据
  //加载级联选择器数据的方法
  async lazyLoad(node: any, resolve: any) {
    let result: any = await reqCity(node.data.id || '86')
    //整理数据
    let showData = result.data.map((item: any) => {
      return {
        id: item.id,
        label: item.name,
        value: item.value,
        leaf: !item.hasChildren //是否有下级数据
      }
    })
    //注入组件需要展示的数据
    resolve(showData)
  }
}

//提交按钮的方法的回调
const submit = async () => {
  try {
    //要么新增就诊人 | 更新一个已有的就诊人
    await reqAddOrUpdateUser(userParams)
    //提示文字
    ElMessage({
      type: 'success',
      message: userParams.id ? '更新成功' : '新增成功'
    })
    //判断提交按钮的时候判断是不是从预约挂号而来
    if ($route.query.type) {
      $router.back()
    } else {
      scene.value = 0
    }
    //再获取全部就诊人信息
    getAllUser()
  } catch (error) {
    ElMessage({
      type: 'error',
      message: userParams.id ? '更新失败' : '新增失败'
    })
  }
}

//监听全部就诊人的数据
//这里用于从预约挂号处跳转过来修改时，查询用户数据并绑定
watch(
  () => userArr.value,
  () => {
    if ($route.query.type == 'edit') {
      let user = userArr.value.find((item: any) => {
        return item.id == $route.query.id
      })
      Object.assign(userParams, user)
    }
  }
)

//子组件的自定义事件：删除按钮触发
const removeUser = () => {
  //再次获取全部就诊人信息
  getAllUser()
}
</script>

<style scoped lang="scss">
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.visitors {
  display: flex;
  flex-wrap: wrap;

  .item {
    width: 32%;
    margin: 5px;
  }
}
</style>
